<template lang="html">
  <section class="components-common_register_panel-input">
    <label :for="name">{{title}}: </label>
    <input type="text" :id="name" v-model="value" :placeholder="placeHolder">
    <span
      class="errMsg"
      :style="{ right: (isShowMsg ? '2%' : '-100%')}"
    >{{errMsg}}</span>
  </section>
</template>

<script>
import debounce from 'lodash.debounce'
export default {
  props: {
    name: {
      type: String,
    },
    title: {
      type: String,
    },
    placeHolder: {
      type: String,
    },
    errMsg: {
      type: String
    },
    regExp: {
      type: RegExp
    }
  },
  data(){
    return {
      value: '',
      isShowMsg: false
    }
  },
  watch: {
    value: debounce(function(val){
      let payload
      if(this.checkValue()){
        payload = {
          key: this.name,
          value: this.value
        }
      } else {
        payload = {
          key: this.name,
          value: new Error(`${this.name} Error`)
        }
      }
      this.$emit('dispatchValue', payload)
    }, 1200)
  },
  methods: {
    checkValue(){
      let result = this.regExp.test(this.value)
      if(!result){
        this.showError()
      }
      return result
    },
    showError(){
      if(this.isShowMsg) return
      this.isShowMsg = true
      setTimeout(() => {
        this.isShowMsg = false
      }, 2000)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../css/config";
.components-common_register_panel-input{
  position: relative;
  width: 100%;
  margin-bottom: 35px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  label{
    font-size: 30px;
    color: #000;
    letter-spacing: 1Px;
  }
  input{
    width: 80%;
    height: 50px;
    line-height: 50px;
    font-size: 28px;
    letter-spacing: 1Px;
    color: #000;
    padding-left: 15px;
    box-sizing: border-box;
    background-color: #e6e6e6;
  }
  .errMsg{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    font-size: 28px;
    color: $common-red;
    padding: 5px 10px;
    border-radius: 3px;
    transition: right 0.4s;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.7) 0%, #fff 10%);
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  }
}
</style>
